// 左侧区域
.main-left {
    background-color: $frame-left-bg;

    .slimScrollBar {
        background-color: rgba($white-color, 0) !important;
    }

    .menubar {
        >li {
            >a {
                color: $frame-left-color;

                &:hover,
                &:active {
                    color: $frame-left-hover-color;
                }
            }

            &.selected {
                >a {
                    color: $frame-left-select-color;
                }
            }

            &.active {
                background-color: $frame-left-active-bg;

                >a {
                    color: $frame-left-active-color;
                }
            }
        }

        &.menubar-second {
            >li {
                >a {
                    color: $frame-left-color;

                    &:hover,
                    &:active {
                        color: $frame-left-hover-color;
                    }
                }


            }
        }



        &.menubar-second,
        &.menubar-third,
        &.menubar-forth {
            >li {
                &.selected {
                    >a {
                        background-color: $frame-left-select-bg;
                        color: $frame-left-select-color;
                        border-right: 3px solid $frame-left-select-bdcolor;
                    }
                }
            }
        }
    }
}

// 迷你菜单模式页面布局
&.mini-menu {
    .main-left {
        .menubar {
            li {
                border: none !important;
            }

            >li.active {
                background-color: transparent;
            }

            li:hover>a>span.nav-label {
                background-color: $frame-left-bg;
                border-color: $frame-left-mini-border-color;
            }

            li:hover .menubar-second {
                background-color: mix($frame-left-bg, $white-color, 98%);
                border-color: $frame-left-mini-border-color;
            }
        }
    }
}

&.menu-light {
    $frame-left-bg: $white-color; //左侧菜单默认背景颜色
    $frame-left-color: $body-text-color; //菜单默认文字颜色
    $frame-left-hover-color: $base-primary; //菜单默认文字激活颜色
    $frame-left-select-bg: mix($base-primary, $white-color, 10%); //激活菜单背景
    $frame-left-select-color: $base-primary; //激活菜单文字颜色
    $frame-left-select-bdcolor: darken($frame-left-select-bg, 40%); //激活菜单边框
    $frame-left-active-bg: $white-color; //激活菜单背景
    $frame-left-active-color: $frame-left-color; //激活菜单背景
    $frame-left-mini-border-color:#ddd;
    // 左侧区域
    .main-left {
        background-color: $frame-left-bg;

        .slimScrollBar {
            background-color: rgba($white-color, 0) !important;
        }

        .menubar {
            >li {
                >a {
                    color: $frame-left-color;

                    &:hover,
                    &:active {
                        color: $frame-left-hover-color;
                    }
                }

                &.selected {
                    >a {
                        color: $frame-left-select-color;
                    }
                }

                &.active {
                    background-color: $frame-left-active-bg;

                    >a {
                        color: $frame-left-active-color;
                    }
                }
            }

            &.menubar-second {
                >li {
                    >a {
                        color: $frame-left-color;

                        &:hover,
                        &:active {
                            color: $frame-left-hover-color;
                        }
                    }


                }
            }



            &.menubar-second,
            &.menubar-third,
            &.menubar-forth {
                >li {
                    &.selected {
                        >a {
                            background-color: $frame-left-select-bg;
                            color: $frame-left-select-color;
                            border-right: 3px solid $frame-left-select-bdcolor;
                        }
                    }
                }
            }
        }
    }

    // 迷你菜单模式页面布局
    &.mini-menu {
        .main-left {
            .menubar {
                li {
                    border: none !important;
                }

                >li.active {
                    background-color: transparent;
                }

                li:hover>a>span.nav-label {
                    background-color: $frame-left-bg;
                    border-color: $frame-left-mini-border-color;
                }

                li:hover .menubar-second {
                    background-color: mix($frame-left-bg, $white-color, 98%);
                    border-color: $frame-left-mini-border-color;
                }
            }
        }
    }
}